<template>
  <div style="display: flex;">
    <div>
      <div class="left">
        <InterfaceTree
            menutype=2
            @getTreeID="setTreeID"
            eventType="0"
        ></InterfaceTree>
      </div>
    </div>
    <div>
      <div class="container">
        <div class="left-table" id="left">
          <el-table
              border
              style="width: 620px"
              :data="caseLeftData"
              ref='leftTable'
              row-key="ID"
              :cell-style="{paddingTop: '5px', paddingBottom: '5px'}"
          >
            <el-table-column
                type="index"
                width="50"
            >
            </el-table-column>

            <el-table-column
                min-width="550"
                align="center"
            >
              <template #default="scope">
                <div class="block" :class="`block_get`">
                  <span class="block-method block_method_color"
                        :class="`block_method_get`">
                    CASE
                  </span>
                  <div class="block">
                    <span class="block-method block_method_color block_method_options"
                          v-if="scope.row.creator==='yapi'"
                          :title="'从YAPI导入的接口'">
                      YAPI
                    </span>
                  </div>
                  <span class="block-method block_url">{{ scope.row.name }}</span>
                  <span class="block-method block_url">{{ scope.row.ID }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="right-table" id="right" >
          <el-table
              border
              :key="tableKey"
              style="width: 620px"
              ref='rightTable'
              :data="caseData"
              row-key='ID'
              :cell-style="{paddingTop: '5px', paddingBottom: '5px'}"
          >
            <el-table-column
                type="index"
                width="50"
            >
            </el-table-column>
            <el-table-column
                min-width="550"
                align="center"
            >
              <template #default="scope">
                <div class="block" :class="`block_post`">
                  <span class="block-method block_method_color"
                        :class="`block_method_post`">
                    TASK
                  </span>
                  <div class="block">
                    <span class="block-method block_method_color block_method_options"
                          v-if="scope.row.creator==='yapi'"
                          :title="'从YAPI导入的接口'">
                      YAPI
                    </span>
                  </div>
                  <span class="block-method block_url">{{ scope.row.ApiTestCase.name }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>

</template>

<script  setup>
import draggable from "vuedraggable";
import InterfaceTree from '@/view/interface/interfaceComponents/interfaceTree.vue'
import {
  getInterfaceTemplateList
} from '@/api/interfaceTemplate'

import Sortable from 'sortablejs'
import {onMounted, ref} from "vue"
import {
  findTestCase,
  addTestCase, sortTestCase, getTestCaseList
} from "@/api/testCase";
import {
  findApiTestCase,
  addApiTestCase,
} from "@/api/apiCase";
import {ElMessage} from "element-plus";
const isRouterActive = ref(true)


let caseList = []
const listTypes = ref("")
const apiIds = ref(0)
const caseIds = ref(0)
const menuIds = ref(0)
let treeID = 0
let caseId = 0
let tableKey = 0
const caseLeftData = ref([])
const caseData = ref([])

listTypes.value = "api"
// listTypes.value = "case"
apiIds.value = 1
caseIds.value = 1
caseIds.menuIds = 47
const apiTypes = 1

const props = defineProps({
  caseId: ref(),
})


const getTestCaseDetailFunc = async(testCaseID) => {
  const res = await findApiTestCase({ ID: testCaseID })
  if (res.code === 0) {
    caseData.value = res.data.reapicase
  }
}


const init = () => {
  // caseId = props.caseId
  caseId = 2
  getTestCaseDetailFunc(caseId)
}
init()

onMounted(()=>{
  const leftTable = document.getElementById("left").querySelector('tbody')
  const rightTable = document.getElementById("right").querySelector('tbody')
  leftDragHandler(leftTable)
  rightDragHandler(rightTable)
})

const setTreeID = (val) => {
  treeID = val
  getTableData()
}


const leftDragHandler = async(dom, target) => {



  Sortable.create(dom, {

    sort: false,
    group: { name: 'table-group', pull: 'clone', put: false },
    animation:1000,

    async onEnd(obj) {
      const { from, to, newIndex, oldIndex,index } = obj
      if (from === to) {
      } else if (from !== to) {
        let tSteps = []
        const sortData = ref({
          ID: 0,
          TStep: []
        })
        let currRow = caseLeftData.value[oldIndex]
        const res = await addApiTestCase({ apiID: currRow.ID, caseID: Number(caseId) })
        if (res.code === 0) {
          ElMessage({
            type: 'success',
            message: '添加用例成功'
          })
          let currRowData = res.data
          caseData.value.splice(newIndex, 0, currRowData)
          const rightTable = document.getElementById("right").querySelector('tbody')
          rightTable.deleteRow(newIndex)
          caseData.value.forEach((item, index, arr) => {
            let tStep = {ID:item.ID, sort:index+1}
            tSteps.push(tStep)
          })
          sortData.value.TStep = tSteps
          const SortRes = await sortTestCase(sortData.value)
          if (SortRes.code === 0) {
            ElMessage({
              type: 'success',
              message: '已完成排序'
            })
          }
          tableKey++
        }
      }
    }

  })
}

const rightDragHandler = (dom, target) => {
  Sortable.create(dom, {
    sort: false,
    group: { name: 'table-group', pull: true, put: true },
    animation:1000,
  })
}


const log = (evt) => {
  // evt.added.element.id = 99
}

// 查询
const getTableData = async() => {
  let menu = treeID
  const table = await getTestCaseList({menu: treeID, page: 1, pageSize: 99999 })
  if (table.code === 0) {
    caseLeftData.value = table.data.list
  }
}

</script>


<style lang="scss" scoped>
@import 'src/style/apiList';
.container {
  margin: 10px;
  display: flex;

}
.right-table {
  margin-left: 30px;
  height: 750px;
  overflow: auto;
}

.left-table {
  margin-left: 30px;
  height: 750px;
  overflow: auto;
}

//.parent {
//  width: 85%;
//  height: 85%;
//}

.left {
  margin:10px;
  width: 300px;
  height: 98%;
  padding:8px;
  background: #ffffff;
}

</style>
